<template>
  <div class="p-6 max-w-7xl mx-auto">
    <!-- 标题区 -->
    <div class="mb-6">
      <h1 class="text-2xl font-bold mb-2">评价人标题</h1>
      <div class="space-x-4">
        <button class="px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-600">
          十添加
        </button>
        <button class="px-4 py-2 bg-red-500 text-white rounded hover:bg-red-600">
          删除
        </button>
        <button class="px-4 py-2 bg-green-500 text-white rounded hover:bg-green-600">
          评价
        </button>
        <button class="px-4 py-2 bg-gray-500 text-white rounded hover:bg-gray-600">
          后台打开详情
        </button>
      </div>
    </div>

    <!-- 表格区 -->
    <div class="overflow-x-auto rounded-lg border">
      <table class="min-w-full divide-y divide-gray-200">
        <thead class="bg-gray-50">
        <tr>
          <th
              v-for="header in headers"
              :key="header"
              class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider"
          >
            {{ header }}
          </th>
        </tr>
        </thead>
        <tbody class="bg-white divide-y divide-gray-200">
        <tr
            v-for="item in tableData"
            :key="item.id"
            class="hover:bg-gray-50"
        >
          <td class="px-6 py-4 whitespace-nowrap">{{ item.id }}</td>
          <td class="px-6 py-4 whitespace-nowrap">{{ item.title }}</td>
          <td class="px-6 py-4 whitespace-nowrap">{{ item.author }}</td>
          <td class="px-6 py-4 whitespace-nowrap">
            <div class="flex text-yellow-400">
                <span v-for="star in 5" :key="star" class="text-lg">
                  {{ star <= item.rating ? '★' : '☆' }}
                </span>
            </div>
          </td>
          <td class="px-6 py-4 whitespace-nowrap">{{ item.quantity }}</td>
          <td class="px-6 py-4 whitespace-nowrap">📂</td>
          <td class="px-6 py-4 whitespace-nowrap">
              <span
                  :class="{
                  'bg-green-100 text-green-800': item.status === 'published',
                  'bg-red-100 text-red-800': item.status === 'deleted',
                  'bg-gray-100 text-gray-800': item.status === 'draft'
                }"
                  class="px-2 py-1 rounded-full text-xs font-medium"
              >
                {{ statusMap[item.status] }}
              </span>
          </td>
          <td class="px-6 py-4 whitespace-nowrap">{{ formatDate(item.time) }}</td>
          <td class="px-6 py-4 whitespace-nowrap space-x-4">
            <button class="text-blue-500 hover:text-blue-700">详情</button>
            <button class="text-gray-500 hover:text-gray-700">编辑</button>
            <button class="text-red-500 hover:text-red-700">删除</button>
          </td>
        </tr>
        </tbody>
      </table>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'

interface TableItem {
  id: number
  title: string
  author: string
  rating: number
  quantity: number
  status: 'published' | 'deleted' | 'draft'
  time: string
}

const headers = [
  '序号', '标题', '作者', '评级', '数量', '开奖', '状态', '时间', '所需操作例'
]

const statusMap = {
  published: '已发布',
  deleted: '已删除',
  draft: '草稿'
}

const tableData = ref<TableItem[]>([
  // 示例数据，可根据实际需要修改
  {
    id: 1,
    title: '夏必义大全卷',
    author: '姜秀兰',
    rating: 4,
    quantity: 338,
    status: 'published',
    time: '1979-06-05 10:23:39'
  },
  // 其他数据项...
])

const formatDate = (dateString: string) => {
  // 这里可以添加更复杂的日期格式化逻辑
  return dateString.replace('T', ' ').split('.')[0]
}
</script>

<style>
/* 可以添加自定义样式 */
</style>